<template>
  <view class="header">
    <view class="header-left">
      <view class="app-icon">
        <view class="icon-grid">
          <view class="icon-dot"></view>
          <view class="icon-dot"></view>
          <view class="icon-dot"></view>
          <view class="icon-dot"></view>
        </view>
      </view>
      <view class="app-title">
        <text class="iconfont icon-search"></text>
        <text class="title-text">{{ title }}</text>
      </view>
    </view>
    <view class="header-right">
      <view class="header-btn">···</view>
      <view class="header-btn">
        <text class="iconfont icon-camera"></text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AppHeader',
  props: {
    title: {
      type: String,
      default: '心岛低语'
    }
  }
};
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #333;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.app-icon {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.icon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rpx;
}

.icon-dot {
  width: 8rpx;
  height: 8rpx;
  background-color: #fff;
  border-radius: 50%;
}

.app-title {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.title-text {
  font-size: 32rpx;
  color: #d8b4fe; /* 紫色 */
}

.header-right {
  display: flex;
  gap: 20rpx;
}

.header-btn {
  width: 70rpx;
  height: 70rpx;
  background-color: #444;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
}
</style>